<template>
  <div class="quesControls">
    <transition name="el-fade-in-linear">
      <div v-show="show">
        <template v-if="!editItem">
          <Button type="primary" @click="edit">编辑</Button>
          <!-- <Button v-if="item.chapterType&&item.chapterType===3" type="primary" @click="add">添加题目</Button> -->
          <!-- <Button v-else type="primary" @click="setCondition()">设置前置条件</Button> -->
          <Button v-if="!item.chapterType||item.chapterType!==3" type="primary" @click="setCondition()">设置前置条件</Button>
          <Button type="danger" @click="delet()">删除</Button>
          <Button type="primary" @click="move('prev')">上移</Button>
          <Button type="primary" @click="move('next')">下移</Button>
          <Button type="primary" @click="move('first')">最前</Button>
          <Button type="primary" @click="move('last')">最后</Button>
          <EditItem ref="editItem" :index-num="indexNum" :is-score="isScore" :questionnaire-id="questionnaireId" :chapter-id="item.id" @confrimFunc="confrimFunc" />
        </template>
        <div v-else style="text-align:center;padding: 15px 0">
          <Button v-if="item.chapterType&&item.chapterType===3" type="primary" @click="add">添加题目</Button>
          <EditItem ref="editItem" :index-num="indexNum" :is-score="isScore" :questionnaire-id="questionnaireId" :chapter-id="item.id" @confrimFunc="confrimFunc" />
        </div>
      </div>
    </transition>
    <setCondition ref="setCondition" @confrim="confrimFunc"></setCondition>
  </div>
</template>
<script>
import Button from '@/components/Button'
import EditItem from '../EditItem'
import setCondition from '../setCondition'
import {
  questionnaireItemMove,
  questionnaireItemDelete
} from '@/api/questionnaire'
export default {
  name: 'QuesControls',
  components: {
    Button,
    EditItem,
    setCondition
  },
  props: {
    list: {
      type: Array,
      default: () => {
        return []
      }
    },
    item: {
      type: Object,
      default: () => {
        return {}
      }
    },
    questionnaireId: {
      type: String,
      default: ''
    },
    isScore: {
      // 问卷类型
      type: [Number, String],
      default: ''
    },
    show: {
      type: Boolean,
      default: false
    },
    editItem: {
      type: Boolean,
      default: undefined
    }
  },
  data() {
    return {
      tempData: {},
      indexNum: 0
    }
  },
  methods: {
    // 打开编辑弹窗
    edit() {
      this.$refs.editItem.openDailog(this.item)
    },
    add() {
      const arys = this.item.questionnaireQuestionDTOList
      if (arys.length) {
        this.indexNum = arys[arys.length - 1].topic_index + 1
      } else {
        this.indexNum = 1
      }
      this.$refs.editItem.openDailog()
    },
    // 编辑确定
    confrimFunc(data) {
      this.$emit('refresh')
    },
    // 删除
    delet() {
      return this.$msgbox({
        title: '提示',
        message: '确认删除？',
        showCancelButton: true,
        type: 'warning'
      }).then(() => {
        return questionnaireItemDelete(this.item)
          .then(res => {
            this.$emit('refresh')
          })
          .catch(er => {})
      })
    },
    // 设置前置条件
    setCondition() {
      this.$refs.setCondition.openDailog(this.item, this.list)
    },
    // 移动
    move(type) {
      let index = 0
      if (this.item.chapterType && this.item.chapterType === 3) {
        index = this.item.serialNumber - 1
      } else {
        index = this.item.displaySerialNumber - 1
      }
      var ary = JSON.parse(JSON.stringify(this.list))
      var temp = ary[index]
      if (type === 'first' || type === 'prev') {
        if (index < 1) {
          return this.$message({
            message: '已经在最上方了',
            type: 'warning'
          })
        }
      }
      if (type === 'last' || type === 'next') {
        if (index === this.list.length - 1) {
          return this.$message({
            message: '已经在最下方了',
            type: 'warning'
          })
        }
      }
      if (type === 'first') {
        ary.splice(index, 1)
        ary.unshift(temp)
      }
      if (type === 'prev') {
        var prev = ary[index - 1]
        ary[index] = prev
        ary[index - 1] = temp
      }
      if (type === 'last') {
        ary.splice(index, 1)
        ary.push(temp)
      }
      if (type === 'next') {
        var next = ary[index + 1]
        ary[index] = next
        ary[index + 1] = temp
      }
      const reqList = []
      ary.filter(e => {
        return e !== undefined
      }).forEach((el, i) => {
        reqList.push({
          id: el.id,
          displaySerialNumber: i + 1
        })
      })
      return questionnaireItemMove(reqList)
        .then(res => {
          this.$emit('refresh')
        })
        .catch(er => {})
    }
  }
}
</script>
<style lang="scss" scoped>
.quesControls {
  position: absolute;
  padding-top: 5px;
  right: 0;
  top: 0;
  > div {
    text-align: right;
  }
}
</style>
